<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 启用360浏览器的极速模式(webkit) -->
  <meta name="renderer" content="webkit" />
  <!-- 避免IE使用兼容模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="format-detection" content="telephone=no" />
  <title></title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="js/rem.js"></script>
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/common.js"></script>
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/liMarquee.css">
  <link rel="stylesheet" href="plugins/layui/css/layui.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/style.css" />
  <script type="text/javascript">
    // 测试数据：115（石川），87(一区三次)
    var companyId = getUrlParams('id') || '0'
    function checkLoginPermission() {
      // fat
      // var pc2LoginUrl = 'http://xiechang2-fat.sfrog.cn/user.html';
      // uat
      var pc2LoginUrl = 'http://xiechang2.xiechang.com/user.html'
      var pcAdminToken = localStorage.getItem('pcAdminToken');
      var pcScreenStorageToken = localStorage.getItem('pcScreenStorageToken');
      // 无token直接返回无权限
      if (!pcScreenStorageToken && !pcAdminToken) {
        window.location.href = pc2LoginUrl;
        return
      }

      $.ajax({
        url: baseUrl + '/pcApi/biz/pcIndex/checkLoginPermission',
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify({ pcAdminToken: pcAdminToken, pcScreenStorageToken: pcScreenStorageToken, companyId: companyId }),
        async: false,
        success: function (res) {
          if ('noPermission' === res.data.permissionFlag) {
            window.location.href = pc2LoginUrl;
          }
        },
        error: function (err) {
          window.location.href = pc2LoginUrl;
        }
      });
    }

    checkLoginPermission();
  </script>
</head>

<body>
  <header>
    <div class="logo">
      <img src="images/home_icon/default_logo@2x.png" alt="">
      <p>苏州协昌环保科技股份有限公司</p>
    </div>
    <h1>烟尘治理云平台</h1>
    <div class="time">
      <div id="time"></div>
      <div>
        <p id="week"></p>
        <p id="show"></p>
      </div>
      <div onclick="fullScreen()"><img src="images/icon_full screen@2x.png" alt=""></div>
      <div onclick="exitScreen()"><img src="images/icon_close_highlighted@2x.png" alt=""></div>
    </div>
  </header>
  <div class="mainbox">
    <div class="box">
      <div class="title title2">
        <div>
          <img src="images/second_icon/icon_detailed_default@2x.png" alt="">
          <p>设备明细</p>
        </div>
        <select class="select-l-device-type" name="">
          <option value="" selected>设备类型</option>
          <option value="box">箱室</option>
          <option value="pocket">气包</option>
          <option value="valve">阀</option>
        </select>
      </div>
      <div class="box-right">
        <div id="scroll2" class="scroll scroll2">
          <ul class="scroll_nav">
            <li>序号</li>
            <li>设备名称</li>
            <li>设备编号</li>
            <li>设备类型</li>
            <li>设备状态</li>
          </ul>
          <ul class="scroll_list device-list-info-page">
            <!--<li class="scroll_info">
              <ul class="scroll_nav">
                <li>1</li>
                <li>1号箱室</li>
                <li>201</li>
                <li>箱室</li>
                <li>
                  <div>正常</div>
                </li>
              </ul>
            </li>-->
          </ul>
        </div>
      </div>
      <div class="title title2">
        <div>
          <img src="images/second_icon/icon_state_default@2x.png" alt="">
          <p>智能阀工作状态</p>
        </div>
        <div class="select_more" id="boxFirst">
          <select class="valve-select-box-list" name="">
            <!--<option value="">箱室1</option>-->
          </select>
          <select class="valve-select-pocket-list" name="">
            <!--<option value="">气包1</option>-->
          </select>
        </div>
      </div>
      <div class="box-right box-right2" id="scroll3">
        <div class="work valve-work-page-class">
          <!--
          <li class="green">
            <div class="work_list">
              <div class="work_box work_box1"></div>
              <div class="work_box work_box2"></div>
              <div class="work_box work_box3"></div>
              <div class="work_box work_box4"></div>
              <div class="work_box work_box5"></div>
              <div class="work_box work_box6"></div>
            </div>
            <p>智能阀3</p>
          </li>
          <li class="yellow">
            <div class="work_list">
              <div class="work_box work_box1"></div>
              <div class="work_box work_box2"></div>
              <div class="work_box work_box3"></div>
              <div class="work_box work_box4"></div>
              <div class="work_box work_box5"></div>
              <div class="work_box work_box6"></div>
            </div>
            <p>智能阀4</p>
          </li>
          <li class="red">
            <div class="work_list">
              <div class="work_box work_box1"></div>
              <div class="work_box work_box2"></div>
              <div class="work_box work_box3"></div>
              <div class="work_box work_box4"></div>
              <div class="work_box work_box5"></div>
              <div class="work_box work_box6"></div>
            </div>
            <p>智能阀5</p>
          </li>-->
        </div>
      </div>
    </div>
    <div class="box-center">
      <ul class="number">
        <li>
          <img src="images/home_icon/icon_duster_default@2x.png" alt="">
          <div>
            <p>除尘器总量</p>
            <span class="counter catcher-count">0</span>
          </div>
        </li>
        <li>
          <img src="images/home_icon/icon_room_default@2x.png" alt="">
          <div>
            <p>箱室总量</p>
            <span class="counter box-count">0</span>
          </div>
        </li>
        <li>
          <img src="images/home_icon/icon_air_default@2x.png" alt="">
          <div>
            <p>气包总量</p>
            <span class="counter pocket-count">0</span>
          </div>
        </li>
        <li>
          <img src="images/home_icon/icon_valve_default@2x.png" alt="">
          <div>
            <p>智能阀总量</p>
            <span class="counter zhi-valve-count">0</span>
          </div>
        </li>
      </ul>
      <div class="switch">

        <div class="title title1">
          <img src="images/home_icon/icon_business_default@2x.png" alt="">
          <p class="company-name-title"></p>
        </div>
        <div class="parameter">
          <div class="parameter_l">
            <p class="name" id="catcherName">设备名称：</p>
            <ul>
              <li>
                <img src="images/second_icon/icon_gas_default@2x.png" alt="">
                <p id="airConsumption">耗气量：</p>
              </li>
              <li>
                <img src="images/second_icon/icon_mpa_default@2x.png" alt="">
                <p id="systemPressure">系统压差：</p>
              </li>
            </ul>
          </div>
          <div class="parameter_r" id="catcherStatus"></div>
        </div>
        <div class="swiper-container swiper-container1" id="swiperContainer1">
          <div class="swiper-wrapper">
            <!--          <div class="swiper-slide">-->
            <!--            <div class="switch_img"><img src="images/img_dust@2x.png" alt=""></div>-->
            <!--          </div>-->
            <!--          <div class="swiper-slide">-->
            <!--            <div class="switch_img"><img src="images/img_dust@2x.png" alt=""></div>-->
            <!--          </div>-->
          </div>
          <div class="swiper-button-prev swiper-button-prev-1"></div>
          <div class="swiper-button-next swiper-button-next-1"></div>
        </div>
        <ul class="switch_number">
          <li>
            <div id="boxCount"><span class="count-txt" id="boxCountTxt">0</span>个</div>
            <p>箱室总数</p>
          </li>
          <li>
            <div id="pocketCount"><span class="count-txt" id="pocketCountTxt">0</span>个</div>
            <p>气包总数</p>
          </li>
          <li>
            <div id="intellectValveCount"><span class="count-txt" id="intellectValveCountTxt">0</span>个</div>
            <p>智能阀总数</p>
          </li>
        </ul>

      </div>
      <div class="box_list">
        <div class="title title2">
          <div>
            <img src="images/home_icon/icon_record_default@2x.png" alt="">
            <p>设备运行状态</p>
          </div>
          <!-- 交互效果1 -->
          <!-- <select class="select-device-runstatus" name="">
            <option value="1">风机状态</option>
            <option value="2">料位计状态</option>
          </select> -->

          <!-- 交互效果2 -->
          <div class="device-status-tab">
            <div class="tab-item active" data-id="1">风机</div>
            <div class="tab-item" data-id="2">料位计</div>
          </div>
        </div>
        <div class="box-right box-runStatus">
          <!-- 风机 -->
          <div class="draughtFan-scroll">
            <div id="draughtFanStatus" class="status">风机状态</div>
            <div class="fan-img">
              <img id="draught" class="draught" src="./images/draught.png" alt="" />
              <img id="fan" class="fan" src="./images/fan.png" alt="" />
            </div>
            <div class="no-draughtFan">未绑定风机</div>
          </div>
          <!-- 料位计 -->
          <div class="ashBucket-scroll">
            <ul class="ashBucket_nav">
              <!-- <li>序号</li> -->
              <li>名称</li>
              <li class="special">
                <div class="top">高料位状态</div>
                <div class="bottom">
                  <div>0</div>
                  <div>1</div>
                </div>
              </li>
              <li class="special">
                <div class="top">低料位状态</div>
                <div class="bottom">
                  <div>0</div>
                  <div>1</div>
                </div>
              </li>
              <!-- <li>设置位置</li> -->
            </ul>
            <!-- 料位计状态 -->
            <ul class="ashBucket_list ash-bucket-wrap">
              <!-- <li class="ashBucket_info">
                <ul class="ashBucket_nav">
                  <li>1</li>
                  <li>灰斗1</li>
                  <li>时间1</li>
                  <li>时间2</li>
                  <li>时间3</li>
                  <li>时间4</li>
                  <li>石川实验除尘器-1#气包-1#箱室</li>
                </ul>
              </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-list">
        <div class="title title2">
          <div>
            <img src="images/second_icon/icon_chqushi@2x.png" alt="">
            <p id="dusterName">除尘器实时趋势</p>
          </div>
          <!-- <select class="" name="">
            <option value="all">除尘器1</option>
          </select> -->
        </div>
        <div class="box-r">
          <div class="swiper-container swiper-container2 swiper-no-swiping" id="swiperContainer2">
            <div class="swiper-wrapper">
              <!--            <div class="swiper-slide">-->
              <!--              <div id="duster"></div>-->
              <!--            </div>-->
              <!--            <div class="swiper-slide">-->
              <!--              <div id="duster1"></div>-->
              <!--            </div>-->
            </div>
            <div class="swiper-button-prev swiper-button-prev-2"></div>
            <div class="swiper-button-next swiper-button-next-2"></div>
          </div>
        </div>
      </div>
      <div class="box-list">
        <div class="title title2">
          <div>
            <img src="images/second_icon/icon_trend_default@2x.png" alt="">
            <p id="pocketName">气包实时趋势</p>
          </div>
          <select class="select-detectionTarget-pocket" name="">
            <!--          <option value="all">气包1</option>-->
            <!--          <option value="">气包2</option>-->
            <!--          <option value="">气包3</option>-->
          </select>
        </div>
        <div class="box-r">
          <div class="swiper-container swiper-container3 swiper-no-swiping" id="swiperContainer3">
            <div class="swiper-wrapper">
              <!--            <div class="swiper-slide">-->
              <!--              <div id="air_pocket"></div>-->
              <!--            </div>-->
              <!--            <div class="swiper-slide">-->
              <!--              <div id="air_pocket1"></div>-->
              <!--            </div>-->
            </div>
            <div class="swiper-button-prev swiper-button-prev-3"></div>
            <div class="swiper-button-next swiper-button-next-3"></div>
          </div>
        </div>
      </div>
      <div class="box-list">
        <div class="title title2">
          <div>
            <img src="images/second_icon/icon_xiangshiqushi_default@2x.png" alt="">
            <p id="boxName">箱室实时趋势</p>
          </div>
          <select class="select-detectionTarget-box" name="">
            <!--          <option value="all">箱室1</option>-->
            <!--          <option value="">箱室2</option>-->
            <!--          <option value="">箱室3</option>-->
          </select>
        </div>
        <div class="box-r">
          <div class="swiper-container swiper-container4 swiper-no-swiping" id="swiperContainer4">
            <div class="swiper-wrapper">
              <!--            <div class="swiper-slide">-->
              <!--              <div id="box_room"></div>-->
              <!--            </div>-->
              <!--            <div class="swiper-slide">-->
              <!--              <div id="box_room1"></div>-->
              <!--            </div>-->
            </div>
            <div class="swiper-button-prev swiper-button-prev-4"></div>
            <div class="swiper-button-next swiper-button-next-4"></div>
          </div>
        </div>
      </div>
      <div class="box-list">
        <div class="title title2">
          <div>
            <img src="images/second_icon/icon_maikuanqushi_default@2x.png" alt="">
            <p id="pulseName">脉冲阀实时趋势</p>
          </div>
          <select class="select-detectionTarget-pulse" name="">
            <!--          <option value="all">脉冲阀1</option>-->
            <!--          <option value="">脉冲阀2</option>-->
            <!--          <option value="">脉冲阀3</option>-->
          </select>
        </div>
        <div class="box-r">
          <div class="swiper-container swiper-container5 swiper-no-swiping" id="swiperContainer5">
            <div class="swiper-wrapper">
              <!--            <div class="swiper-slide">-->
              <!--              <div id="pulse"></div>-->
              <!--            </div>-->
              <!--            <div class="swiper-slide">-->
              <!--              <div id="pulse1"></div>-->
              <!--            </div>-->
            </div>
            <div class="swiper-button-prev swiper-button-prev-5"></div>
            <div class="swiper-button-next swiper-button-next-5"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/swiper.min.js"></script>
  <script type="text/javascript" src="js/swiper.animate.min.js"></script>
  <script type="text/javascript" src="plugins/layui/layui.js"></script>
  <!-- 数字跳动 -->
  <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
  <script type="text/javascript" src="js/jquery.countup.js"></script>
  <script type="text/javascript" src="js/countUp.js"></script>
  <!-- 数据自动向上滑动 -->
  <script type="text/javascript" src="js/jquery.SuperSlide.2.1.3.js"></script>
  <script type="text/javascript" src="js/jquery.liMarquee.js"></script>
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <!-- 顶部时间 -->
  <script type="text/javascript">
    window.onload = function () {
      showTime();
    }

    function checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }

    function showTime() {
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var day = now.getDate();
      var h = now.getHours();
      var m = now.getMinutes();
      var s = now.getSeconds();
      m = checkTime(m)
      s = checkTime(s)

      var weekday = new Array(7)
      weekday[0] = "星期日"
      weekday[1] = "星期一"
      weekday[2] = "星期二"
      weekday[3] = "星期三"
      weekday[4] = "星期四"
      weekday[5] = "星期五"
      weekday[6] = "星期六"
      var w = weekday[now.getDay()];
      document.getElementById("time").innerHTML = "" + h + ":" + m + ":" + s;
      document.getElementById("week").innerHTML = "" + w + "";
      document.getElementById("show").innerHTML = "" + year + "-" + month + "-" + day + "";
      t = setTimeout("showTime()", 1000)
    }
  </script>
  <!-- 全屏 -->
  <script>
    // 监听网络
    window.addEventListener("online", function () {
      console.log("网络已连接");
      layer.msg('网络已连接')
      setTimeout(function () {
        window.location.reload()
      }, 1000)
    })
    window.addEventListener("offline", function () {
      console.log("网络已断开");
      layer.msg('网络已断开');
      if (timer2) {
        clearInterval(timer2)
        timer2 = ''
      }
      if (timer1) {
        clearInterval(timer1)
        timer1 = ''
      }
    })
    function fullScreen() {
      var el = document.documentElement;
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
      }
      ;
      return;
    }

    //退出全屏
    function exitScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      }
    }
  </script>
  <script>
    var ws = ''
    var ws2 = null    // 获取风机\料位计实时状态数据
    var catcherDeviceListData = []
    var swiper1 = '' // 主轮播
    var swiper2 = ''  // 除尘器轮播
    var swiper3 = '' // 气包轮播
    var swiper4 = '' // 箱室轮播
    var swiper5 = '' // 脉冲轮播
    var pocketData = '' // 气包数据
    var boxData = '' // 箱室数据
    var pulseData = '' // 脉冲数据
    var catcherId = ''
    var timer1 = '' // 定时器1 30s
    var timer2 = '' // 定时器2 10min
    var swiper1Index = 0 // 轮播index

    /**
     * 图表数据记录，格式为{deviceId-detectionId: []}
     * 譬如：某个阀的deviceId为111，监测量id为222，数据为[1, 2, 3] 
     * 则最终格式为：graphData = {"111-222": [1, 2, 3]}
     * 该数据主要用来记录各个设备下不同监测量的图表数据，用于模拟实时绘制效果
     */
    var graphData = {}
    // 智能阀
    var tableScroll3 = ''
    var tableScroll3Page = {
      pageNum: 1,
      pageSize: 50,
      lastPage: false
    }
    tableScroll3 = $("#scroll3").slide({
      mainCell: ".work",
      autoPage: true,
      effect: "topLoop",
      autoPlay: true,
      vis: 4,
      scroll: 1
    })

    var boxSelect = false
    var pocketSelect = false
    var isBoxOrPocket = 'box'

    function loadCompanyInfo() {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getCompanyInfo/' + companyId,
        type: 'get',
        success: function (res) {
          var rec = res.data;
          if (rec) {
            $('.company-name-title').text('企业名称：' + rec.companyName);
          }
        }
      });
    }

    function loadCompanyTopDeviceCount() {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcIndex/getTopDeviceCount',
        type: 'get',
        data: { companyId: companyId },
        success: function (res) {
          var rec = res.data;
          if (rec) {
            // 除尘器数量
            $('.catcher-count').text(rec.catcherCount);
            // 箱室数量
            $('.box-count').text(rec.boxCount);
            // 气包数量
            $('.pocket-count').text(rec.pocketCount);
            // 智能阀数量
            $('.zhi-valve-count').text(rec.intellectValveCount);
          }
          $('.counter').countUp({
            delay: 10,
            // time: 15000
            time: 1000
          });
        }
      });
    }

    function loadCompanyCatcherDeviceList() {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getCatcherDeviceList',
        type: 'get',
        data: {
          companyId: companyId
        },
        success: function (res) {
          if (res.code == "00000") {
            catcherDeviceListData = res.data
            // first
            if (catcherDeviceListData.length) {
              changeCenterData(0)
              var html = ''
              $(catcherDeviceListData).each(function (i, v) {
                // todo 注销使用
                // v.catcherImage = 'images/img_demo_1.gif'
                html += '<div class="swiper-slide">\n' +
                  '            <div class="switch_img"><img src="' + v.catcherScreenImage + '" alt=""></div>\n' +
                  '          </div>'
              })
              $("#swiperContainer1 .swiper-wrapper").html(html)
              swiper1 = new Swiper('#swiperContainer1', {
                navigation: {
                  nextEl: '.swiper-button-next-1',
                  prevEl: '.swiper-button-prev-1',
                },
                autoPlay: false,
                speed: 900,
                loop: false,
                on: {
                  slideChangeTransitionEnd: function () {
                    swiper1Index = this.activeIndex
                    console.log(`当前是第${swiper1Index}个除尘器`);
                    changeCenterData(this.activeIndex)
                  }
                }
              })
            }
          }
        }
      });
    }

    /*
    * 中部 设备切换
    * */
    function changeCenterData(index, bool) {
      // console.log('index', index)
      $("#catcherName").html('设备名称：' + catcherDeviceListData[index].catcherName)
      $("#airConsumption").html('耗气量：' + catcherDeviceListData[index].airConsumption + catcherDeviceListData[index].airConsumptionUnit)
      $("#systemPressure").html('系统压差：' + catcherDeviceListData[index].systemPressure + catcherDeviceListData[index].systemPressureUnit)
      $("#catcherStatus").html(catcherDeviceListData[index].catcherStatus)
      if (catcherDeviceListData[index].catcherStatus == '正常') {
      } else if (catcherDeviceListData[index].catcherStatus == '异常') {
        $("#catcherStatus").addClass('warn')
      } else if (catcherDeviceListData[index].catcherStatus == '故障') {
        $("#catcherStatus").addClass('danger')
      }
      // $("#boxCount .count-txt").html(catcherDeviceListData[index].boxCount)
      // $("#pocketCount .count-txt").html(catcherDeviceListData[index].pocketCount)
      // $("#intellectValveCount .count-txt").html(catcherDeviceListData[index].intellectValveCount)
      // $('.count-txt').countUp({
      //   delay: 10,
      //   time: 1000
      // });
      var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: ''
      };
      new CountUp("boxCountTxt", 0, catcherDeviceListData[index].boxCount, 0, 3, options).start()
      new CountUp("pocketCountTxt", 0, catcherDeviceListData[index].pocketCount, 0, 3, options).start()
      new CountUp("intellectValveCountTxt", 0, catcherDeviceListData[index].intellectValveCount, 0, 3, options).start()

      // catcherId 赋值
      catcherId = catcherDeviceListData[index].catcherId
      if (ws) {
        ws.close()
      }
      connectSocket(catcherId)
      // select
      $('.select-l-device-type').val('')
      // 获取左侧设备明细
      resetCompanyDeviceList()

      // 设置除尘器轮播数量
      setDusterSwiper(index)

      // 获取气包 select
      loadPocketSelect()

      // 获取箱室 select
      loadBoxSelect()

      // 获取脉冲 select
      loadPulseSelect()

      // 智能阀
      // if(catcherDeviceListData[index].distinguishType=="box"){
      //   $("#boxFirst").removeClass('no')
      //   $("#pocketFirst").addClass('no')
      //   isBoxOrPocket = 'box'
      loadDeviceBoxSelect()
      // }else if(catcherDeviceListData[index].distinguishType=="pocket"){
      //   $("#pocketFirst").removeClass('no')
      //   $("#boxFirst").addClass('no')
      //   isBoxOrPocket = 'pocket'
      loadDevicePocketSelect()
      // }

      resetCompanyValveDeviceList()

      /**
       * 2024-08-08新增
       */
      loadBlowerList(catcherId)
      loadAshBucketList(catcherId)
      if (ws2) {
        ws2.close()
      }
      openWS(catcherId)

      // 切换除尘器后，graphData数据需重置
      graphData = []
    }

    /*
    * 设备明细
    * */
    // 左侧设备明细的设备类型切换
    $('.select-l-device-type').change(function () {
      resetCompanyDeviceList()
    });
    function resetCompanyDeviceList() {
      // 获取左侧设备明细
      // 切换设备时 清除
      $('.device-list-info-page').empty();
      $("#scroll2").clearQueue();
      loadCompanyDeviceListInfoPage(catcherId)
    }
    function loadCompanyDeviceListInfoPage(catcherId) {
      var deviceType1 = $('.select-l-device-type').val();
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getCompanyDeviceInfo',
        type: 'get',
        data: {
          catcherId: catcherId,
          pageNum: 1,
          pageSize: 10000,
          deviceType: deviceType1
        },
        success: function (res) {
          var rec = res.data;
          if (res.code == "00000") {
            var record = rec.list;
            if (record && record.length > 0) {
              var pinHtml = '';

              for (let i = 0; i < record.length; i++) {
                let deviceStatusClass = '';
                if (record[i].deviceStatus === '异常') {
                  deviceStatusClass = 'yc';
                } else if (record[i].deviceStatus === '故障') {
                  deviceStatusClass = 'gz';
                }
                let deviceTypeName = '';
                if (record[i].deviceType === 'box') {
                  deviceTypeName = '箱室';
                } else if (record[i].deviceType === 'pocket') {
                  deviceTypeName = '气包';
                } else if (record[i].deviceType === 'valve') {
                  deviceTypeName = '智能阀';
                }
                // todo: 序号
                pinHtml += '<li class="scroll_info">' +
                  '                                <ul class="scroll_nav">' +
                  '                                <li>' + (i + 1) + '</li>' +
                  '                                <li>' + record[i].deviceName + '</li>' +
                  '                            <li>' + record[i].deviceSn + '</li>' +
                  '                            <li>' + deviceTypeName + '</li>' +
                  '                            <li>' +
                  '                            <div class="' + deviceStatusClass + '">' + record[i].deviceStatus + '</div>' +
                  '                            </li>' +
                  '                            </ul>' +
                  '                            </li>';
              }
              $('.device-list-info-page').append(pinHtml);

              // 渲染完成后开启无缝滚动
              $('.device-list-info-page').liMarquee({
                direction: 'up',
                runshort: false,
                scrollamount: 15
              });
            }
          }
        }
      });
    }

    /*
    * 除尘器
    * */
    // 设置除尘器轮播数量
    function setDusterSwiper(index) {
      if (!catcherDeviceListData[index].detectionTargetVOList.length) {
        $("#swiperContainer2 .swiper-wrapper").empty()
        $("#dusterName").html('除尘器实时趋势')
        return
      }
      var html = ''
      $(catcherDeviceListData[index].detectionTargetVOList).each(function (i, v) {
        html += ' <div class="swiper-slide">\n' +
          '              <div class="chart-box" id="duster' + i + '"></div>\n' +
          '            </div>'
      })
      $("#swiperContainer2 .swiper-wrapper").html(html)
      if (swiper2) {
        swiper2.destroy()
      }
      $("#dusterName").html('除尘器' + catcherDeviceListData[index].detectionTargetVOList[0].name + '实时趋势')
      swiper2 = new Swiper('#swiperContainer2', {
        // cssMode: true,
        navigation: {
          nextEl: '.swiper-button-next-2',
          prevEl: '.swiper-button-prev-2',
        },
        autoPlay: false,
        speed: 900,
        loop: false,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log("???", this.activeIndex)
            $("#dusterName").html('除尘器' + catcherDeviceListData[index].detectionTargetVOList[this.activeIndex].name + '实时趋势')
          }
        }
      })
      $(catcherDeviceListData[index].detectionTargetVOList).each(function (i, v) {
        // 获取除尘器数据
        loadDuster(catcherId, v.id, i, v)
      })
    }
    // 获取除尘器数据
    function loadDuster(deviceId, detectionTargetId, index, dusterData, reRender = true) {
      $.ajax({
        // url: baseUrl + '/pcApi/biz/pcCompanyIndex/getTendencyDataList',
        // 新接口，取最新n条数据
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getTendencyDataLimit',
        type: 'post',
        contentType: "application/json",
        data: JSON.stringify({
          deviceId: deviceId,
          detectionTargetId: detectionTargetId,
          num: 100
        }),
        success: function (res) {
          if (res.code == '00000') {
            if (!graphData[`${deviceId}-${detectionTargetId}`]) {
              graphData[`${deviceId}-${detectionTargetId}`] = []
            }
            let previousData = graphData[`${deviceId}-${detectionTargetId}`]
            let newData = res.data
            // 最终数据
            let lastData = mergeData(previousData, newData)
            // 将最终结果作为下一次前置数据
            graphData[`${deviceId}-${detectionTargetId}`] = lastData
            dusterChart('duster' + index, dusterData, lastData, reRender)
          }
        }
      })
    }

    /*
    * 气包
    * */
    // 气包数据切换
    $('.select-detectionTarget-pocket').change(function () {
      // console.log('select-detectionTarget-pocket', $('.select-detectionTarget-pocket').val())
      var index = Number($('.select-detectionTarget-pocket').val())
      setPocketSwiper(index)
    });
    // 设置气包轮播数量 及 select
    function setPocketSwiper(index) {
      if (!pocketData[index].detectionTargetVOList.length) {
        $("#swiperContainer3 .swiper-wrapper").empty()
        $("#pocketName").html('气包实时趋势')
        return
      }
      var html = ''
      $(pocketData[index].detectionTargetVOList).each(function (i, v) {
        html += ' <div class="swiper-slide">\n' +
          '              <div class="chart-box" id="pocket' + i + '"></div>\n' +
          '            </div>'
      })
      $("#swiperContainer3 .swiper-wrapper").html(html)
      if (swiper3) {
        swiper3.destroy()
      }
      $("#pocketName").html('气包' + pocketData[index].detectionTargetVOList[0].name + '实时趋势')
      swiper3 = new Swiper('#swiperContainer3', {
        // cssMode: true,
        navigation: {
          nextEl: '.swiper-button-next-3',
          prevEl: '.swiper-button-prev-3',
        },
        autoPlay: false,
        speed: 900,
        loop: false,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log("???", this.activeIndex)
            $("#pocketName").html('气包' + pocketData[index].detectionTargetVOList[this.activeIndex].name + '实时趋势')
          }
        }
      })
      $(pocketData[index].detectionTargetVOList).each(function (i, v) {
        // 获取气包数据
        loadPocket(pocketData[index].pocketId, v.id, i, v)
      })
    }
    function loadPocketSelect() {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getPocketDeviceList',
        type: 'get',
        data: {
          catcherId: catcherId
        },
        success: function (res) {
          var rec = res.data
          pocketData = rec
          if (res.code == '00000') {
            if (pocketData.length) {
              var pinHtml = '';
              for (let i = 0; i < rec.length; i++) {
                pinHtml += '<option value="' + i + '" data-id="' + rec[i].pocketId + '">' + rec[i].pocketName + '</option>';
              }
              // $('.valve-select-pocket-list').html(pinHtml)
              $('.select-detectionTarget-pocket').html(pinHtml)
              setPocketSwiper(0)
            }

            // pocketSelect = true
            // if (boxSelect && pocketSelect) {
            //   resetCompanyValveDeviceList()
            // }
          }
        }
      })
    }
    // 获取气包数据
    function loadPocket(deviceId, detectionTargetId, index, pocketData, reRender = true) {
      $.ajax({
        // url: baseUrl + '/pcApi/biz/pcCompanyIndex/getTendencyDataList',
        // 新接口，取最新n条数据
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getTendencyDataLimit',
        type: 'post',
        contentType: "application/json",
        data: JSON.stringify({
          deviceId: deviceId,
          detectionTargetId: detectionTargetId,
          num: 100
        }),
        success: function (res) {
          if (res.code == '00000') {
            if (!graphData[`${deviceId}-${detectionTargetId}`]) {
              graphData[`${deviceId}-${detectionTargetId}`] = []
            }
            let previousData = graphData[`${deviceId}-${detectionTargetId}`]
            let newData = res.data
            // 最终数据
            let lastData = mergeData(previousData, newData)
            // 将最终结果作为下一次前置数据
            graphData[`${deviceId}-${detectionTargetId}`] = lastData
            pocketChart('pocket' + index, pocketData, lastData, reRender)
          }
        }
      })
    }

    /*
    * 箱室
    * */
    // 箱室数据切换
    $('.select-detectionTarget-box').change(function () {
      // console.log('select-detectionTarget-pocket', $('.select-detectionTarget-pocket').val())
      var index = Number($('.select-detectionTarget-box').val())
      setBoxSwiper(index)
    });
    // 设置箱室轮播数量 及 select
    function setBoxSwiper(index) {
      if (!boxData[index].detectionTargetVOList.length) {
        $("#swiperContainer4 .swiper-wrapper").empty()
        $("#boxName").html('箱室实时趋势')
        return
      }
      var html = ''
      $(boxData[index].detectionTargetVOList).each(function (i, v) {
        html += ' <div class="swiper-slide">\n' +
          '              <div class="chart-box" id="box' + i + '"></div>\n' +
          '            </div>'
      })
      $("#swiperContainer4 .swiper-wrapper").html(html)
      if (swiper4) {
        swiper4.destroy()
      }
      $("#boxName").html('箱室' + boxData[index].detectionTargetVOList[0].name + '实时趋势')
      swiper4 = new Swiper('#swiperContainer4', {
        // cssMode: true,
        navigation: {
          nextEl: '.swiper-button-next-4',
          prevEl: '.swiper-button-prev-4',
        },
        autoPlay: false,
        speed: 900,
        loop: false,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log("???", this.activeIndex)
            $("#boxName").html('箱室' + pocketData[index].detectionTargetVOList[this.activeIndex].name + '实时趋势')
          }
        }
      })
      $(boxData[index].detectionTargetVOList).each(function (i, v) {
        // 获取箱室数据
        loadBox(boxData[index].boxId, v.id, i, v)
      })
    }
    function loadBoxSelect() {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getBoxDeviceList',
        type: 'get',
        data: {
          catcherId: catcherId
        },
        success: function (res) {
          var rec = res.data
          boxData = rec
          if (res.code == '00000') {
            if (boxData.length) {
              var pinHtml = '';
              for (let i = 0; i < rec.length; i++) {
                pinHtml += '<option value="' + i + '" data-id="' + rec[i].boxId + '">' + rec[i].boxName + '</option>';
              }
              // $('.valve-select-box-list').html(pinHtml)
              $('.select-detectionTarget-box').html(pinHtml)
              setBoxSwiper(0)
            }

            // boxSelect = true
            // if (boxSelect && pocketSelect) {
            //   resetCompanyValveDeviceList()
            // }
          }
        }
      })
    }
    // 获取箱室数据
    function loadBox(deviceId, detectionTargetId, index, boxData, reRender = true) {
      $.ajax({
        // url: baseUrl + '/pcApi/biz/pcCompanyIndex/getTendencyDataList',
        // 新接口，取最新n条数据
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getTendencyDataLimit',
        type: 'post',
        contentType: "application/json",
        data: JSON.stringify({
          deviceId: deviceId,
          detectionTargetId: detectionTargetId,
          num: 100
        }),
        success: function (res) {
          if (res.code == '00000') {
            if (!graphData[`${deviceId}-${detectionTargetId}`]) {
              graphData[`${deviceId}-${detectionTargetId}`] = []
            }
            let previousData = graphData[`${deviceId}-${detectionTargetId}`]
            let newData = res.data
            // 最终数据
            let lastData = mergeData(previousData, newData)
            // 将最终结果作为下一次前置数据
            graphData[`${deviceId}-${detectionTargetId}`] = lastData
            boxChart('box' + index, boxData, lastData, reRender)
          }
        }
      })
    }

    /*
   * 脉冲
   * */
    // 脉冲数据切换
    $('.select-detectionTarget-pulse').change(function () {
      // console.log('select-detectionTarget-pocket', $('.select-detectionTarget-pocket').val())
      var index = Number($('.select-detectionTarget-pulse').val())
      setPulseSwiper(index)
    });
    // 设置箱室轮播数量 及 select
    function setPulseSwiper(index) {
      if (!pulseData[index].detectionTargetVOList.length) {
        $("#swiperContainer5 .swiper-wrapper").empty()
        $("#pulseName").html('脉冲阀实时趋势')
        return
      }
      var html = ''
      $(pulseData[index].detectionTargetVOList).each(function (i, v) {
        html += ' <div class="swiper-slide">\n' +
          '              <div class="chart-box" id="pulse' + i + '"></div>\n' +
          '            </div>'
      })
      $("#swiperContainer5 .swiper-wrapper").html(html)
      if (swiper5) {
        swiper5.destroy()
      }
      $("#pulseName").html('脉冲阀' + pulseData[index].detectionTargetVOList[0].name + '实时趋势')
      swiper5 = new Swiper('#swiperContainer5', {
        // cssMode: true,
        navigation: {
          nextEl: '.swiper-button-next-5',
          prevEl: '.swiper-button-prev-5',
        },
        autoPlay: false,
        speed: 900,
        loop: false,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log("???", this.activeIndex)
            $("#pulseName").html('脉冲阀' + pulseData[index].detectionTargetVOList[this.activeIndex].name + '实时趋势')
          }
        }
      })
      $(pulseData[index].detectionTargetVOList).each(function (i, v) {
        // 获取脉冲阀数据
        loadPulse(pulseData[index].valveId, v.id, i, v)
      })
    }
    function loadPulseSelect() {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getValveDeviceStatusList',
        type: 'get',
        data: {
          catcherId: catcherId,
          pageNum: 1,
          pageSize: 9999,
        },
        success: function (res) {
          var rec = res.data.list
          pulseData = rec
          if (res.code == '00000') {
            if (pulseData.length) {
              var pinHtml = '';
              for (let i = 0; i < rec.length; i++) {
                pinHtml += '<option value="' + i + '" data-id="' + rec[i].valveId + '">' + rec[i].valveSn + '</option>';
              }
              $('.select-detectionTarget-pulse').html(pinHtml);
              setPulseSwiper(0)
            }
          }
        }
      })
    }

    // 获取脉冲阀数据
    function loadPulse(deviceId, detectionTargetId, index, pulseData, reRender = true) {
      // console.log(deviceId, detectionTargetId, index, pulseData, reRender, 'fuck...')
      $.ajax({
        // url: baseUrl + '/pcApi/biz/pcCompanyIndex/getTendencyDataList',
        // 新接口，取最新n条数据
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getTendencyDataLimit',
        type: 'post',
        contentType: "application/json",
        data: JSON.stringify({
          deviceId: deviceId,
          detectionTargetId: detectionTargetId,
          num: 100
        }),
        success: function (res) {
          if (res.code == '00000') {
            if (!graphData[`${deviceId}-${detectionTargetId}`]) {
              graphData[`${deviceId}-${detectionTargetId}`] = []
            }
            let previousData = graphData[`${deviceId}-${detectionTargetId}`]
            let newData = res.data
            // 最终数据
            let lastData = mergeData(previousData, newData)
            // 将最终结果作为下一次前置数据
            graphData[`${deviceId}-${detectionTargetId}`] = lastData
            pulseChart('pulse' + index, pulseData, lastData, reRender)
          }
        }
      })
    }

    /*
    * 智能阀
    * */
    // 智能阀设备类型切换
    $('#boxFirst .valve-select-box-list').change(function () {
      // resetCompanyValveDeviceList()
      // loadDeviceBoxPocketSelect()
      // console.log('valve-select-box-list', $('#boxFirst .valve-select-box-list').val())
      if ($('#boxFirst .valve-select-box-list').val() == -1) {
        // loadDeviceBoxPocketSelect()
        loadDeviceBoxSelect(true)
      } else {
        loadDeviceBoxPocketSelect(true)
      }
    });
    $('#boxFirst .valve-select-pocket-list').change(function () {
      // resetCompanyValveDeviceList()
      // resetCompanyValveDeviceList()
      if ($('#boxFirst .valve-select-pocket-list').val() == -1) {
        loadDevicePocketSelect(true)
      } else {
        loadDevicePocketBoxSelect(true)
      }
    });
    // $('#pocketFirst .valve-select-box-list').change(function () {
    //   // resetCompanyValveDeviceList()
    //   resetCompanyValveDeviceList()
    // });
    // $('#pocketFirst .valve-select-pocket-list').change(function () {
    //   // resetCompanyValveDeviceList()
    //   loadDevicePocketBoxSelect()
    // });
    function loadDeviceBoxSelect(msg) {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getBoxDeviceList',
        type: 'get',
        data: {
          catcherId: catcherId
        },
        success: function (res) {
          if (res.code == '00000') {
            if (res.data.length) {
              var pinHtml = '<option value="-1" data-id="">全部</option>';
              for (let i = 0; i < res.data.length; i++) {
                // pinHtml += '<option value="' + i + '" data-id="'+res.data[i].boxId+'">' + res.data[i].boxName + '</option>';
                pinHtml += '<option value="' + res.data[i].boxId + '" data-id="' + res.data[i].boxId + '">' + res.data[i].boxName + '</option>';
              }
              $('#boxFirst .valve-select-box-list').html(pinHtml)
              if (msg) {
                loadDeviceBoxPocketSelect(msg)
              }
            }
          }
        }
      })
    }
    function loadDeviceBoxPocketSelect(remember) {
      var valveSelectBoxId = ''
      // if(isBoxOrPocket=='box'){
      //   valveSelectBoxId = $('#boxFirst .valve-select-box-list').find('option:eq('+$('#boxFirst .valve-select-box-list').val()+')').attr('data-id')
      // }else{
      //   valveSelectBoxId = $('#pocketFirst .valve-select-box-list').find('option:eq('+$('#pocketFirst .valve-select-box-list').val()+')').attr('data-id')
      // }
      valveSelectBoxId = $('#boxFirst .valve-select-box-list').val() == -1 ? '' : $('#boxFirst .valve-select-box-list').val()
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getPocketDeviceList',
        type: 'get',
        data: {
          catcherId: catcherId,
          boxId: valveSelectBoxId
        },
        success: function (res) {
          if (res.code == '00000') {
            if (res.data.length) {
              var val = $('#boxFirst .valve-select-pocket-list').val() || ''
              var can = 1
              if (remember) {
                $(res.data).each(function (i, v) {
                  if (v.pocketId == val) {
                    can *= 0
                  } else {
                    can *= 1
                  }
                })
              }
              var pinHtml = '<option value="-1" data-id="">全部</option>';
              for (let i = 0; i < res.data.length; i++) {
                // pinHtml += '<option value="' + i + '" data-id="'+res.data[i].pocketId+'">' + res.data[i].pocketName + '</option>';
                pinHtml += '<option value="' + res.data[i].pocketId + '" data-id="' + res.data[i].pocketId + '">' + res.data[i].pocketName + '</option>';
              }
              $('#boxFirst .valve-select-pocket-list').html(pinHtml)
              if (remember) {
                if (!can) {
                  $('#boxFirst .valve-select-pocket-list').val(val)
                }
              }
              resetCompanyValveDeviceList()
            }
          }
        }
      })
    }
    function loadDevicePocketSelect(msg) {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getPocketDeviceList',
        type: 'get',
        data: {
          catcherId: catcherId
        },
        success: function (res) {
          if (res.code == '00000') {
            if (res.data.length) {
              var pinHtml = '<option value="-1" data-id="">全部</option>';
              for (let i = 0; i < res.data.length; i++) {
                // pinHtml += '<option value="' + i + '" data-id="'+res.data[i].pocketId+'">' + res.data[i].pocketName + '</option>';
                pinHtml += '<option value="' + res.data[i].pocketId + '" data-id="' + res.data[i].pocketId + '">' + res.data[i].pocketName + '</option>';
              }
              // $('#pocketFirst .valve-select-pocket-list').html(pinHtml)
              $('#boxFirst .valve-select-pocket-list').html(pinHtml)
              if (msg) {
                loadDevicePocketBoxSelect(msg)
              }
            }
          }
        }
      })
    }
    function loadDevicePocketBoxSelect(remember) {
      var valveSelectPocketId = ''
      // if(isBoxOrPocket=='box'){
      //   valveSelectPocketId = $('#boxFirst .valve-select-pocket-list').find('option:eq('+$('#boxFirst .valve-select-pocket-list').val()+')').attr('data-id')
      // }else{
      //   valveSelectPocketId = $('#pocketFirst .valve-select-pocket-list').find('option:eq('+$('#pocketFirst .valve-select-pocket-list').val()+')').attr('data-id')
      // }
      valveSelectPocketId = $('#boxFirst .valve-select-pocket-list').val() == -1 ? '' : $('#boxFirst .valve-select-pocket-list').val()
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getBoxDeviceList',
        type: 'get',
        data: {
          catcherId: catcherId,
          pocketId: valveSelectPocketId
        },
        success: function (res) {
          if (res.code == '00000') {
            if (res.data.length) {
              var val = $('#boxFirst .valve-select-box-list').val() || ''
              var can = 1
              if (remember) {
                $(res.data).each(function (i, v) {
                  if (v.boxId == val) {
                    can *= 0
                  } else {
                    can *= 1
                  }
                })
              }
              var pinHtml = '<option value="-1" data-id="">全部</option>';
              for (let i = 0; i < res.data.length; i++) {
                // pinHtml += '<option value="' + i + '" data-id="'+res.data[i].boxId+'">' + res.data[i].boxName + '</option>';
                pinHtml += '<option value="' + res.data[i].boxId + '" data-id="' + res.data[i].boxId + '">' + res.data[i].boxName + '</option>';
              }
              $('#boxFirst .valve-select-box-list').html(pinHtml)
              if (remember) {
                if (!can) {
                  $('#boxFirst .valve-select-box-list').val(val)
                }
              }
              resetCompanyValveDeviceList()
            }
          }
        }
      })
    }
    function resetCompanyValveDeviceList() {
      // 获取智能阀
      // 切换设备时 清除
      $('.valve-work-page-class').empty();
      $("#scroll3").clearQueue();
      tableScroll3[0].destroy();
      tableScroll3Page.pageNum = 1
      tableScroll3Page.lastPage = false
      boxSelect = false
      pocketSelect = false
      loadCompanyValveDeviceStatusList(catcherId)
    }
    function loadCompanyValveDeviceStatusList(catcherId) {
      var valveSelectBoxId = ''
      var valveSelectPocketId = ''
      // if(isBoxOrPocket=='box'){
      //   valveSelectBoxId = $('#boxFirst .valve-select-box-list').find('option:eq('+$('#boxFirst .valve-select-box-list').val()+')').attr('data-id')
      //   valveSelectPocketId = $('#boxFirst .valve-select-pocket-list').find('option:eq('+$('#boxFirst .valve-select-pocket-list').val()+')').attr('data-id')
      // }else{
      //   valveSelectBoxId = $('#pocketFirst .valve-select-box-list').find('option:eq('+$('#pocketFirst .valve-select-box-list').val()+')').attr('data-id')
      //   valveSelectPocketId = $('#pocketFirst .valve-select-pocket-list').find('option:eq('+$('#pocketFirst .valve-select-pocket-list').val()+')').attr('data-id')
      // }
      valveSelectBoxId = $('#boxFirst .valve-select-box-list').val() == -1 ? '' : $('#boxFirst .valve-select-box-list').val()
      valveSelectPocketId = $('#boxFirst .valve-select-pocket-list').val() == -1 ? '' : $('#boxFirst .valve-select-pocket-list').val()
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/getValveDeviceStatusList',
        type: 'get',
        data: {
          catcherId: catcherId,
          pageNum: tableScroll3Page.pageNum,
          pageSize: tableScroll3Page.pageSize,
          boxId: valveSelectBoxId || '',
          pocketId: valveSelectPocketId || ''
        },
        success: function (res) {
          var rec = res.data;
          if (res.code == '00000') {
            tableScroll3Page.lastPage = res.data.lastPage
            var pinHtml = '';
            var record = rec.list;
            for (let i = 0; i < record.length; i++) {
              let valveStatusClass = 'green';
              if (record[i].valveStatus === '异常') {
                valveStatusClass = 'yellow';
              } else if (record[i].valveStatus === '故障') {
                valveStatusClass = 'red';
              }
              pinHtml += '<li class="' + valveStatusClass + '" data-id="' + record[i].valveId + '">' +
                '                        <div class="work_list work_list_6 work_list_style">' +
                '                        <div class="work_box work_box1"></div>' +
                '                        <div class="work_box work_box2"></div>' +
                '                        <div class="work_box work_box3"></div>' +
                '                        <div class="work_box work_box4"></div>' +
                '                        <div class="work_box work_box5"></div>' +
                '                        <div class="work_box work_box6"></div>' +
                '                        </div>' +
                '                        <p>' + record[i].valveSn + '</p>' +
                '                        </li>';
            }
            $('.valve-work-page-class').append(pinHtml);
            if (tableScroll3Page.lastPage) {
              // end
              // console.log('走了几次？？？')
              $(".box-right2 .work li").each(function (i) {
                $(".box-right2 .work li").slice(i * 5, i * 5 + 5).wrapAll("<ul></ul>");
              })
              tableScroll3[0].reset()
            } else {
              tableScroll3Page.pageNum += 1
              loadCompanyValveDeviceStatusList(catcherId)
            }
          }
        }
      });
    }

    /*
    * 运维记录
    * */
    function loadCompanyMaintenancePage() {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcIndex/getMaintenancePage',
        type: 'get',
        data: {
          companyId: companyId,
          pageNum: 1,
          pageSize: 1000
        },
        success: function (res) {
          var rec = res.data;
          if (res.code == '00000') {
            var record = rec.list;
            if (record && record.length > 0) {
              var pinHtml = '';
              for (let i = 0; i < record.length; i++) {
                let index = i + 1;
                let infoBanner = '';
                let handleStatus = record[i].handleStatus;
                if (handleStatus === '1') {
                  infoBanner = 'scroll_info1';
                }
                pinHtml += '<li class="scroll_info ' + infoBanner + '">' +
                  '<ul class="scroll_nav">' +
                  '<li>' + {
                    0: '未处理',
                    1: '已处理'
                  }[handleStatus] + '</li>' +
                  '<li>' + record[i].companyBriefName + '</li>' +
                  '<li>' + record[i].monitoringSection + '</li>' +
                  '<li>' + record[i].type + '</li>' +
                  '<li>' + (record[i].handlerTime ? record[i].handlerTime : '') + '</li>' +
                  '</ul>' +
                  '</li>';
              }
            }
            $('.company-maintenance-page').append(pinHtml);
          }
        }
      });
    }

    /*
    * websocket
    * */
    function connectSocket(id) {
      ws = new WebSocket(socketUrl + id);
      //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
      ws.onopen = function () {
        //当WebSocket创建成功时，触发onopen事件
        console.log("open");
        ws.send("hello"); //将消息发送到服务端
      }
      ws.onmessage = function (e) {
        //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
        var data = JSON.parse(e.data)
        // console.log('data', data)
        if (data.deviceType == 'valve') {
          // console.log('data', data)
          if (data.pcScreenSocketType == 'abnormalMsg') {
            var deviceId = data.deviceId;
            // todo
            // var deviceId = 8630
            var status = data.valveStatus;
            var valveStatusClass = 'green';
            if (status == '异常') {
              valveStatusClass = 'yellow';
            } else if (status === '故障') {
              valveStatusClass = 'red';
            }
            var lis = $(".valve-work-page-class li")
            if (lis && lis.length) {
              lis.each(function (i, v) {
                // console.log('i', i, v)
                if ($(v).attr('data-id') == deviceId) {
                  $(v).attr('class', '').addClass(valveStatusClass)
                }
              })
            }
          } else {
            var arr = data.deviceDataArray;
            var can = false
            if (arr && arr.length) {
              $(arr).each(function (i, v) {
                if (v.detectionTargetKpiId == 'd_vlvact') {
                  can = true
                }
              })
            }
            if (can) {
              var deviceId = data.deviceId;
              // todo
              // var deviceId = 8630
              var status = data.valveStatus;
              var valveStatusClass = 'green';
              if (status == '异常') {
                valveStatusClass = 'yellow';
              } else if (status === '故障') {
                valveStatusClass = 'red';
              }
              var lis = $(".valve-work-page-class li")
              if (lis && lis.length) {
                lis.each(function (i, v) {
                  // console.log('i', i, v)
                  if ($(v).attr('data-id') == deviceId) {
                    $(v).attr('class', '').addClass(valveStatusClass).addClass('animate-face')
                    setTimeout(function () {
                      $(v).addClass('animate-back')
                      setTimeout(function () {
                        $(v).removeClass('animate-back').removeClass('animate-face')
                      }, 1500)
                    }, 1500)
                  }
                })
              }
            }
          }

        }
        if (data.deviceType == 'catcher') {
          // console.log('data', data)
          // console.log('catchId', id)
          if (data.deviceId == id) {
            if (data.timeCalcValueCatcher) {
              $("#airConsumption").html('耗气量：' + data.timeCalcValueCatcher + data.airConsumptionUnit)
            }
            if (data.systemPressureData) {
              $("#systemPressure").html('系统压差：' + data.systemPressureData + data.systemPressureUnit)
            }

            if (data.pcScreenSocketType == 'abnormalMsg') {
              var status = data.valveStatus;
              var valveStatusClass = '';
              if (status == '异常') {
                valveStatusClass = 'warn';
              } else if (status === '故障') {
                valveStatusClass = 'danger';
              }
              $("#catcherStatus").html(data.valveStatus)
              $("#catcherStatus").removeClass('warn').removeClass('danger').addClass(valveStatusClass)
            }

          }
        }
      }
      ws.onclose = function (e) {
        //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
        console.log("close");
      }
      ws.onerror = function (e) {
        //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
        console.log(e);
      }
    }

    // 这里的定时只负责刷新图表数据，而且不需要重绘图表
    function setInterval1() {
      timer1 = setInterval(function () {
        // 30s 刷新图表
        /**
         * 除尘器图表刷新 
         */
        let catcherIndex = swiper1Index
        if (catcherDeviceListData[catcherIndex] && catcherDeviceListData[catcherIndex].detectionTargetVOList) {
          $(catcherDeviceListData[catcherIndex].detectionTargetVOList).each(function (i, v) {
            // 获取除尘器数据
            loadDuster(catcherId, v.id, i, v, false)
          })
        }

        /**
         * 气包图表刷新 
         */
        var pocketIndex = Number($('.select-detectionTarget-pocket').val())

        if (pocketData[pocketIndex] && pocketData[pocketIndex].detectionTargetVOList) {
          $(pocketData[pocketIndex].detectionTargetVOList).each(function (i, v) {
            // 获取气包数据
            loadPocket(pocketData[pocketIndex].pocketId, v.id, i, v, false)
          })
        }

        /**
         * 箱室图表刷新 
         */
        var boxIndex = Number($('.select-detectionTarget-box').val())
        if (boxData[boxIndex] && boxData[boxIndex].detectionTargetVOList) {
          $(boxData[boxIndex].detectionTargetVOList).each(function (i, v) {
            // 获取箱室数据
            loadBox(boxData[boxIndex].boxId, v.id, i, v, false)
          })
        }

        /**
         * 脉冲阀图表刷新 
         */
        var pulseIndex = Number($('.select-detectionTarget-pulse').val())
        if (pulseData[pulseIndex] && pulseData[pulseIndex].detectionTargetVOList) {
          $(pulseData[pulseIndex].detectionTargetVOList).each(function (i, v) {
            // 获取脉冲阀数据
            loadPulse(pulseData[pulseIndex].valveId, v.id, i, v, false)
          })
        }
      }, 30 * 1000)
    }

    function setInterval2() {
      timer2 = setInterval(function () {
        // 每隔10min切换主除尘器
        swiper1Index += 1
        if (swiper1Index === catcherDeviceListData.length) {
          swiper1Index = 0
        }
        // 切换至对应除尘器后，触犯swiper回调，重新加载右侧数据
        swiper1.slideTo(swiper1Index)
      }, 10 * 60 * 1000 + 1000)
    }

    /**
     * 设备运行状态 2024-08-08
     */
    // 风机状态/料位计状态切换查看
    // $('.select-device-runstatus').change(function () {
    //   var $o = $(this);
    //   var type = $o.val();
    //   if (type == 1) {
    //     // 风机
    //     $('.draughtFan-scroll').css('opacity', 1);
    //     $('.ashBucket-scroll').css('opacity', 0);
    //   } else if (type == 2) {
    //     // 料位计
    //     $('.draughtFan-scroll').css('opacity', 0);
    //     $('.ashBucket-scroll').css('opacity', 1);
    //   }
    // });

    $(document).on('click', '.device-status-tab .tab-item', function () {
      $('.device-status-tab .tab-item').removeClass('active');
      var $o = $(this);
      $o.addClass('active');
      var type = $o.attr('data-id');
      if (type == 1) {
        // 风机
        $('.draughtFan-scroll').css('opacity', 1);
        $('.ashBucket-scroll').css('opacity', 0);
      } else if (type == 2) {
        // 料位计
        $('.draughtFan-scroll').css('opacity', 0);
        $('.ashBucket-scroll').css('opacity', 1);
      }
    })

    /**
     * 风机相关操作 
     */
    function loadBlowerList(catcherId) {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/apiBlowerList',
        type: 'get',
        data: {
          catcherId,
          compoType: 5,
          type: 'catcher'
        },
        success: function (res) {
          if (res.code == '00000') {
            // console.log('风机数据：', res)
            let blowerList = res.data[0];
            let { blowerVOList } = blowerList;
            // 当前默认一个除尘器只有一个风机（后续根据实际工况再扩展多个风机）
            if (blowerVOList && blowerVOList.length) {
              let blowerVO = blowerVOList[0];
              let { blowerName, detectionTargetVOList } = blowerVO;
              let blowerStatus = '关机';
              detectionTargetVOList.forEach(detectionItem => {
                if (/^0-1_status/.test(detectionItem.kpiId)) {
                  // 风机运行状态 0：关机  1：开机，其他异常情况视为关机
                  blowerStatus = detectionItem.detectionValue == '1' ? '开机' : '关机'
                }
              })
              // 存在风机
              $('.no-draughtFan').hide();
              $('#draughtFanStatus').show();
              $('.fan-img').show();

              $('#draughtFanStatus').html('风机状态：' + blowerStatus);
              if (blowerStatus == '开机') {
                $('#fan').addClass('animate');
              } else {
                $('#fan').removeClass('animate');
              }
            } else {
              // 不存在风机
              $('.no-draughtFan').show();
              $('#draughtFanStatus').hide();
              $('.fan-img').hide();
            }
          }
        }
      });
    }

    /**
     * 灰斗相关操作 
     */
    function loadAshBucketList(catcherId) {
      $.ajax({
        url: baseUrl + '/pcApi/biz/pcCompanyIndex/apiAshbucketList',
        type: 'get',
        data: {
          catcherId,
          compoType: 2,
          type: 'box'
        },
        success: function (res) {
          if (res.code == '00000') {
            // console.log('灰斗数据：', res);
            // 同一个箱室下可能存在多个灰斗，每个灰斗存在高料位计和低料位计
            let result = []
            let listData = res.data;
            listData.forEach(curItem => {
              let { positionName, ashbucketVOList } = curItem
              // 数组拍平，将所有灰斗存放至result中
              ashbucketVOList.forEach(ashItem => {
                let { ashBucketName, id: ashbucketId, detectionTargetVOList } = ashItem
                result.push({
                  positionName,
                  ashbucketId,
                  ashBucketName,
                  detectionTargetVOList
                })
              })
            })

            // console.log(result, '数组拍平')
            // 渲染灰斗列表
            if (result.length === 0) {
              // 未绑定灰斗
              $('.ashBucket-scroll').html('<div class="no-ashBucket">未绑定灰斗</div>');
            } else {
              let _html = '';
              result.forEach((curItem, index) => {
                _html += `<li class="ashBucket_info">
                          <ul class="ashBucket_nav">
                            <li>${curItem.ashBucketName}</li>`;
                let { detectionTargetVOList } = curItem;

                // 后端返回的高料位和低料位状态顺序不确定(取决于数据绑定时的先后顺序)，为了显示统一，高料位在前，低料位在后
                detectionTargetVOList.sort((a, b) => {
                  // 如果 a.kpiId 是 "princo-status-h"，a 排在前面
                  if (a.kpiId === "princo-status-h") return -1;

                  // 如果 b.kpiId 是 "princo-status-h"，b 排在前面
                  if (b.kpiId === "princo-status-h") return 1;

                  // 否则保持顺序不变
                  return 0;
                })
                /**
                 * 为了方便socket推送数据时，快速找到对应dom并修改内容，对id进行如下规则设置
                 * detection-灰斗id-h-0: 对应当前灰斗下，高料位0状态
                 * detection-灰斗id-h-1: 对应当前灰斗下，高料位1状态
                 * detection-灰斗id-l-0: 对应当前灰斗下，低料位0状态
                 * detection-灰斗id-l-1: 对应当前灰斗下，低料位1状态
                 */
                detectionTargetVOList.forEach(detectionItem => {
                  if (/^princo-status-h/.test(detectionItem.kpiId)) {
                    // 高料位状态（初始值可能为：0或1或--）
                    if (detectionItem.detectionValue == '0') {
                      _html += `<li id="detection-${curItem.ashbucketId}-h-0">${detectionItem.lastDataTime || '--'}</li>
                              <li id="detection-${curItem.ashbucketId}-h-1">--</li>`;
                    } else {
                      _html += `<li id="detection-${curItem.ashbucketId}-h-0">--</li>
                              <li id="detection-${curItem.ashbucketId}-h-1">${detectionItem.lastDataTime || '--'}</li>`;
                    }
                  } else if (/^princo-status-l/.test(detectionItem.kpiId)) {
                    // 低料位计
                    if (detectionItem.detectionValue == '0') {
                      _html += `<li id="detection-${curItem.ashbucketId}-l-0">${detectionItem.lastDataTime || '--'}</li>
                              <li id="detection-${curItem.ashbucketId}-l-1">--</li>`;
                    } else {
                      _html += `<li id="detection-${curItem.ashbucketId}-l-0">--</li>
                              <li id="detection-${curItem.ashbucketId}-l-1">${detectionItem.lastDataTime || '--'}</li>`;
                    }
                  }
                })
                _html += `</ul></li>`;
                $('.ashBucket-scroll .ashBucket_list').html(_html);

                // 渲染完成后开启无缝滚动
                $('.ashBucket_list').liMarquee({
                  direction: 'up',
                  runshort: false,
                  scrollamount: 15
                });
              })
            }
          }
        }
      })
    }

    // 获取风机/料位计实时状态数据
    function openWS(catcherId) {
      ws2 = new WebSocket(socketUrl2 + catcherId);
      ws2.onopen = function () {
        console.log("socket连接成功");
      }
      ws2.onmessage = function (e) {
        let data = JSON.parse(e.data);
        // console.log("🚀 ~ openWS ~ data:", data)
        let { deviceId, deviceType, deviceValue, appSocketAction } = data

        if (appSocketAction == 'deviceDetectionData') {
          if (deviceType === 'blower') {
            // 风机
            deviceValue.forEach(wsItem => {
              if (/^0-1_status/.test(wsItem.targetKpiId)) {
                // 风机状态
                if (wsItem.value == '0') {
                  $('#draughtFanStatus').html('风机状态：关机');
                  $('#fan').removeClass('animate');
                } else {
                  $('#draughtFanStatus').html('风机状态：开机');
                  $('#fan').addClass('animate');
                }
              }
            })
          }
          if (deviceType === 'ashbucket') {
            let { lastDataTime } = data
            // 灰斗
            deviceValue.forEach(wsItem => {
              if (/^princo-status-h/.test(wsItem.targetKpiId)) {
                // 高料位状态
                $(`#detection-${deviceId}-h-${wsItem.value == '0' ? '0' : '1'}`).html(lastDataTime);
              }
              if (/^princo-status-l/.test(wsItem.targetKpiId)) {
                // 低料位状态
                $(`#detection-${deviceId}-l-${wsItem.value == '0' ? '0' : '1'}`).html(lastDataTime);
              }
            })
          }
        }
      }
      ws2.onclose = function (e) {
        console.log('socket连接关闭')
      }
      ws2.onerror = function (e) {
        console.log(e);
      }
    }

    $(function () {
      // 企业信息
      loadCompanyInfo();
      // 顶部设备数量
      loadCompanyTopDeviceCount();
      // 除尘器列表
      loadCompanyCatcherDeviceList();
      // 运维记录
      // loadCompanyMaintenancePage();

      setInterval1()
      setInterval2()
    });
  </script>
  <!-- 数据自动向上滑动 -->
  <script>
  </script>
</body>

</html>